<template>
  <el-container style="min-height: 100vh">
    <el-aside :width="sideWith+'px'"
              style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41/35%)">
<!--      左侧导航栏-->
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"></Aside>

    </el-aside>


    <el-container>

      <!-- 头部下拉框-->
      <el-header style="border-bottom: 1px solid #ccc;">

        <Header :collapseBthClass="collapseBthClass" :Collapse="collapse" :user="user"></Header>

      </el-header>


<!--      el-main 导航菜单-->
      <el-main style="height: 500px">
        <!-- 表示当前页面的子路由会在router-view 里面展示 -->
<!--       @refreshUser 注解可能会在用户身份验证或会话管理方面使用，在需要刷新用户信息时触发特定的操作或方法。-->
        <router-view @refreshUser="getUser"/>

      </el-main>

    </el-container>

  </el-container>
</template>

<script>
import Aside from '@/components/Aside'
import Header from '@/components/Header'

export default {
  name: 'HomeView',
  data() {
    return {
      collapseBthClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWith: 200,
      logoTextShow: true,
      // user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
      user: {}
    }
  },
  created(){
    //一开始重后台获取最新的数据
    this.getUser()
  },
  components:{
    Aside,
    Header
  },

  methods: {
    collapse() {  //点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.sideWith = 64
        this.collapseBthClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {  //展开
        this.sideWith = 200
        this.collapseBthClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    getUser(){ 
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      this.request.get("/user/username/" + username).then(res=>{
        //重新赋值最小user数据
        this.user = res.data
      })

    }
    
  }
}
</script>
<style>
.headerBg {
  background-color: #eee !important;
}
</style>

